<!--  -->
<template>
  <div class="lsh-box">
    {{ v }}
    <van-picker
      class="lsh-test-picker"
      title="标题"
      :columns="columns"
      @change="onChange"
      @click-option="clickOption"
      v-model="v"
      v-bind="testProps" />
    <div class="lsh-test-box">
      <PickerPanel
        v-model="v"
        :columns="columns"
        v-bind="testProps" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, withDefaults, computed } from "vue";
import PickerPanel from "./components/picker-panel/index.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
const v = ref();
const isDisabled = (i: number) => i === 1;
const generateDateColumns = () => {
  const years = [];
  const currentYear = new Date().getFullYear();

  for (let year = currentYear - 5; year <= currentYear + 5; year++) {
    const yearItem = {
      label: `${year}年`,
      value: year.toString(),
      children: [],
    };

    // // 为每个年份生成12个月
    for (let month = 1; month <= 12; month++) {
      const monthStr = month.toString().padStart(2, '0');
      const monthItem = {
        label: `${month}月`,
        value:`${year}年`+ monthStr,
        children: [],
        disabled: isDisabled(month),
      };

      // // 根据月份确定天数 (注意: JavaScript中月份从0开始，所以需要month-1)
      const daysInMonth = new Date(year, month - 1, 0).getDate();
      for (let day = 1; day <= daysInMonth; day++) {
        const dayStr = day.toString().padStart(2, '0');
        monthItem.children.push({
          label: `${day}日`,
          value: dayStr,
          disabled: isDisabled(day),
        });
      }

      yearItem.children.push(monthItem);
    }

    years.push(yearItem);
  }

  return years;
};
// const columns = [Array.from({
//   length: 100,
// }).map((_, i) => ({
//   label: `选项${i}`,
//   value: i,
// })),Array.from({
//   length: 100,
// }).map((_, i) => ({
//   label: `选项${i}`,
//   value: i,
// }))];
const columns = generateDateColumns();
const testProps = {
  visibleOptionNum: 6,
  optionHeight: 44,
  columnsFieldNames: { text: "label", value: "value", children: "children" },
};
const onChange = (...args) => {
  console.log("change", args);
};
const clickOption = (...args) => {
  console.log("clickOption", args);
};
</script>
<style scoped lang="less">
.lsh-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .lsh-test-picker {
    width: 100%;
    border: 1px solid #ebebeb;
  }
  .lsh-test-box {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .lsh-svg-item {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ebebeb;
  }
}
</style>
